<div cdkDrag cdkDragHandle
	 cdkDragRootElement=".cdk-overlay-pane"
	 mat-dialog-title>
	<div>
		<h3>Add index on <i>{{ table.name }}</i></h3>
	</div>

	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>

<mat-dialog-content>
	<div style="flex-direction: column; display: flex; margin: 20px 20px 0px 20px; width: 350px; gap: 26px">
		<div style="margin: 0px auto;">
			<mat-button-toggle-group
				#type="matButtonToggleGroup">
				<mat-button-toggle
					*ngFor="let symbol of symbols | keyvalue; let i = index"
					[checked]="i === 0"
					[hidden]="!isSQL() && symbol.key === 'PRIMARY'"
					[value]="symbol.key">
					{{ symbol.key }} {{ symbol.value }}
				</mat-button-toggle>
			</mat-button-toggle-group>
		</div>
		<mat-form-field appearance="fill" style="margin-bottom: -1.25em">
			<mat-label>Column</mat-label>
			<mat-select #columns multiple>
				<mat-option *ngFor="let column of table.columns" [value]="column.name">
					{{ column.name }}
				</mat-option>
			</mat-select>
		</mat-form-field>
		<mat-form-field
			appearance="outline">
			<mat-label>Name</mat-label>
			<input #name
				   [value]="type.value === 'PRIMARY' ? 'PRIMARY' : type.value?.toLowerCase() + '_' + table.name + '_' + columns.value?.join('_')"
				   autocomplete="off"
				   matInput
				   required>
		</mat-form-field>
	</div>
</mat-dialog-content>
<mat-dialog-actions>
	<button (click)="createIndex(name.value, type.value, columns.value)"
			[disabled]="!name.value || !type.value || !columns.value || indexNames.indexOf(name.value) >= 0"
			cdkFocusInitial
			color="primary"
			mat-stroked-button>
		Add index
	</button>
</mat-dialog-actions>
